<template>
    <Waterfall :items="data">
        <template #item="{ data, size, colIndex, itemIndex }">
            <RouterLink :to="{
                name: 'goods',
                params: {
                    id: parseInt((Math.random() * 100) as unknown as string)
                }
            }">
                <div class=" mb-4 space-y-2 bg-white rounded-md overflow-hidden">
                    <div class="mx-auto overflow-hidden ">
                        <LazyImage :src="data.thumb_url" class=" " :size="size" />
                    </div>
                    <div class="grow p-2 pt-0">
                        <div class="h-12 text-sm line-clamp-2">{{ data.name }} {{ colIndex }} {{ itemIndex }} {{ data.title }}</div>
                        <div class="flex items-center mt-1 space-x-2 text-xs ">
                            <div class="px-2 text-red-400 bg-red-100 rounded-lg ">满减</div>
                            <div class="px-2 text-orange-400 bg-orange-100 rounded-lg ">满减</div>
                        </div>
                        <div class="flex items-center justify-between mt-1 text-sm">
                            <div class="text-sm text-red-500">¥399.99</div>
                            <div class="text-xs text-gray-400">395人付款</div>
                        </div>
                    </div>
                </div>
            </RouterLink>
        </template>
    </Waterfall>
</template>
    
<script setup lang='ts'>
const data = inject('goods',[]);
</script>
    
<style></style>